.index-mapping {
    .index-mapping-tab {
        background-color: var(--color-bg-2);
        position: relative;
        width: 100%;
        height: 100%;

        .index-mapping-main {
            display: flex;
            padding-top: 5px;

            .arco-tag {
                margin: 4px 6px;
            }
        }

        .index-mapping-mapper {
            width: 100%;
            margin-top: 5px;

            .index-mapping-mapper-node {
                display: flex;
                width: 100%;

                .arco-tag {
                    margin: 4px 6px;
                    display: inline-table;
                }

                .index-mapping-mapper-node-type {
                    margin-left: 6px;
                }

            }

            .index-mapping-mapper-option {
                position: absolute;
                top: 10px;
                right: 12px
            }
        }

        .arco-tree-node-title:hover {
            background-color: var(--color-bg-2);
        }
    }

    .index-mapping-source {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-bg-2);
        overflow: auto;
    }

    .index-mapping-switch {
        position: absolute;
        top: 0;
        right: 0;
    }

    .read-only {
        min-width: 165px;
        height: 32px;
        padding: 0 12px;
        line-height: 32px;
        font-size: 14px;
        color: var(--color-text-1);
        background-color: var(--color-fill-2);
        border-radius: var(--border-radius-small);
        box-sizing: border-box;
        cursor: text;
    }

}